<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notepad</title>

    <!-- bootstrap -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

    <!-- 引入mui这个框架的css文件 -->
    <link rel="stylesheet" href="./assets/plugins/mui/css/mui.min.css" />

    <!-- 引入城市组件的样式 -->
    <link rel="stylesheet" href="./assets/plugins/city-picker/city-picker.css">

    <!-- animate.css -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- 重置样式 -->
    <link rel="stylesheet" href="./assets/css/reset.css" />

    <!-- 公共样式 -->
    <link rel="stylesheet" href="./assets/css/common.css" />

    <!-- 页面独立的 -->
    <link rel="stylesheet" href="./assets/css/ContactAdd.css" />
</head>

<body>
    <!-- 信息录入 -->
    <div class="info">
        <h3 class="title wow fadeInUp">信息录入</h3>

        <p class="desc wow fadeInUp" data-wow-delay="200ms">
            您可在本页录入您的联系信息，录入成功后名片将会出现在首页。如需修改首页名片信息，也请新建录入，将会自动替换原有名片。
        </p>
    </div>

    <form class="contact wow fadeInUp" data-wow-delay="300ms">
        <div class="form-group">
            <label for="nickname">姓名</label>
            <input type="text" class="form-control" id="nickname" placeholder="请输入姓名" required />
        </div>

        <div class="form-group">
            <label for="mobile">手机</label>
            <input type="text" class="form-control" id="mobile" placeholder="请输入手机" required />
        </div>

        <div class="form-group">
            <label for="gender">性别</label>
            <select class="gender form-control" required>
                <option value="0">保密</option>
                <option value="1">男</option>
                <option value="2">女</option>
            </select>
        </div>

        <div class="form-group">
            <label for="typeid">分类</label>
            <select class="typeid form-control" required>
                <option>请选择</option>
                <option>餐饮</option>
                <option>建材</option>
                <option>医院</option>
            </select>
        </div>

        <div class="from-group" style="position: relative;margin-bottom:15px">
            <label for="region">所在地区</label>
            <input type="text" readonly id="region" name="region" placeholder="请选择所在地区" data-toggle="city-picker" />
        </div>

        <div class="form-group">
            <label for="remark">备注</label>
            <input type="text" class="form-control" id="remark" placeholder="请输入备注" />
        </div>

        <div class="action">
            <button class="btn">提交</button>
        </div>
    </form>

    <!-- 底部 -->
    <div class="tabbar">
        <div class="box">
            <a href="index.html" class="item">
                <span class="icon glyphicon glyphicon-home"></span>
                <span class="name">首页</span>
            </a>
            <a href="ContactAdd.html" class="item">
                <span class="icon glyphicon glyphicon-list-alt"></span>
                <span class="name">新建</span>
            </a>
            <a href="UserIndex.html" class="item">
                <span class="icon glyphicon glyphicon-user"></span>
                <span class="name">我的</span>
            </a>
        </div>
    </div>
</body>

</html>
<!-- jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- wow.js -->
<script src="./assets/js/wow.min.js"></script>


<!-- 引入mui的js文件 -->
<script src="./assets/plugins/mui/js/mui.min.js"></script>

<!-- 引入axios这个插件文件 -->
<script src="./assets/plugins/axios/axios.min.js"></script>

<!-- 自己封装请求函数 里面 GET POST UPLOAD文件请求 -->
<script src="./assets/plugins/axios/request.js"></script>

<!-- cookie引入 -->
<script src="./assets/plugins/cookie.js"></script>

<!-- 引入登录判断的文件 -->
<script src="./assets/plugins/login.js"></script>

<!-- 引入城市组件 -->
<script src="./assets/plugins/city-picker/city-picker.data.min.js"></script>
<script src="./assets/plugins/city-picker/city-picker.min.js"></script>

<script>
    //实例化wow.js
    new WOW().init()

    //先获取到用户信息
    var business = cookie.get('business') ? JSON.parse(cookie.get('business')) : {};

    var Data = sessionStorage.getItem("editData");
    var editData = JSON.parse(Data);

    // 立即执行函数，用来获取分类列表
    (async function () {
        //发送接口请求
        var result = await POST({ url: '/card/card/type' })

        if (result.code == 0) {
            mui.toast(result.msg)
            return false
        }

        //赋值
        var typelist = result.data

        //循环
        $(".typeid").empty()
        for (var item of typelist) {
            $(".typeid").append(`<option value="${item.id}">${item.name}</option>`)
        }


        //判断session中是否有editData，如果有就进入编辑状态，没有就进入新建状态

        if (editData == null) {
            //说明是点击新建进入的
            //表单提交
            $(".contact").submit(async function (e) {

                //阻止元素的默认提交功能
                e.preventDefault()

                //获取邮箱和密码的内容
                var mobile = $.trim($('#mobile').val())

                //正则表达式
                var reg = /^1[3-9]\d{9}/
                if (!reg.test(mobile)) {
                    mui.alert('手机号码格式不正确')
                    return false
                }

                //获取数据
                var nickname = $.trim($("#nickname").val())
                var gender = $.trim($(".gender").val())
                var typeid = $.trim($(".typeid").val())
                var remark = $.trim($("#remark").val())

                //组装
                var data = {
                    businessid: business.id,
                    nickname,
                    mobile,
                    gender,
                    typeid,
                    remark
                }

                //判断是否有选择地区
                var citypicker = $('#region').data('citypicker')

                //获取地区码
                var region = citypicker.getCode('district') || citypicker.getCode('city') || citypicker.getCode('province')

                if (region) {
                    data.region = region
                }

                //发送请求
                var result = await POST({
                    url: '/card/card/add',
                    params: data
                })

                //添加通讯录失败
                if (result.code == 0) {
                    mui.toast(result.msg)
                    return false
                } else {
                    mui.toast(result.msg, { duration: 1000 })

                    setTimeout(() => {
                        location.href = "index.html"
                    }, 1000)

                    return false
                }
            })
        } else {
            //编辑状态
            //给DOM元素绑定默认value
            $("#nickname").val(editData.nickname);
            $("#mobile").val(editData.mobile);
            $(".gender").val(editData.gender);
            $("#remark").val(editData.remark);

            $(".typeid").find("option").each(function () {
                if ($(this).val() == editData.typeid) {
                    $(this).attr("selected", true);
                }
            });
            //地区做一个初始化

            //需要先重置一下地区插件
            $('#region').citypicker('reset')
            $('#region').citypicker('destroy')

            //地区赋默认值
            $('#region').citypicker({
                province: editData.province_text,
                city: editData.city_text,
                district: editData.district_text
            })


            $(".contact").submit(async function (e) {
                //阻止元素的默认提交功能
                e.preventDefault()
                //重新获取数据
                var nickname = $.trim($("#nickname").val())
                var mobile = $.trim($("#mobile").val())
                var gender = $.trim($(".gender").val())
                var typeid = $.trim($(".typeid").val())
                var remark = $.trim($("#remark").val())

                //组装
                var data = {
                    cardid: editData.id,
                    businessid: business.id,
                    nickname,
                    mobile,
                    gender,
                    typeid,
                    remark
                }

                //判断是否有选择地区
                var citypicker = $('#region').data('citypicker')

                //获取地区码
                var region = citypicker.getCode('district') || citypicker.getCode('city') || citypicker.getCode('province')

                if (region) {
                    data.region = region
                }
                //发起请求
                var result = await POST({
                    url: "/card/card/edit",
                    params: data
                })
                //更新失败
                if (result.code == 0) {
                    mui.toast(result.msg)
                    return false
                } else {
                    mui.toast(result.msg)
                    //更新成功 覆盖sessionStorage
                    sessionStorage.setItem("editData", JSON.stringify(data));
                    //刷新本界面
                    location.reload()
                }
            })
        }

    })();

    // 跳出本页面，自动清除session中的editData数据
    $(window).bind('beforeunload', function () { sessionStorage.clear() });

</script>